<template>
  <div class="tableListBox">
    <div class="common-header">
      <div style="cursor: pointer" @click="back">
        <i class="vxe-icon-arrow-left" style="vertical-align: middle"></i
        ><span style="vertical-align: middle">返回</span>
      </div>
      <div>
        <el-button type="primary" size="small" @click="save">保存</el-button>
      </div>
    </div>
    <div class="anthorContent">
      <p class="title"><span class="titleName">基础信息</span></p>
      <vxe-form :data="form" title-align="right" class-name="outForm">
        <vxe-form-item title="收费标准版本" field="versionName" :item-render="{}">
          <template #default="{ data }">
            <vxe-input
              v-model="data.versionName"
              class="normal"
              placeholder="收费标准版本"
              disabled
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="制定日期" field="pubts" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.pubts" class="normal" placeholder="制定日期" disabled></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="当前状态" field="isEnabled" :item-render="{}">
          <template #default="{ data }">
            <vxe-select :value="!!data.isEnabled" placeholder="当前状态" disabled>
              <vxe-option :value="true" label="启用"></vxe-option>
              <vxe-option :value="false" label="停用"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item :visible-method="showFn" title="更新人" field="modifierName" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.modifierName" class="normal" placeholder="更新人" disabled></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item :visible-method="showFn" title="更新时间" field="modifyTime" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.modifyTime" class="normal" placeholder="更新时间" disabled></vxe-input>
          </template>
        </vxe-form-item>
      </vxe-form>
      <p class="title">
        <span class="titleName">收费标准详情</span>
      </p>
      <div class="title-operation">
        <el-button type="primary" size="small" @click="insertEvent(-1)">新增检测项目</el-button>
      </div>
      <TableCommon ref="common" isEdit :columns="tableColumn" :tableData="commonTableData" @submit="submit" />
    </div>
  </div>
</template>
<script>
import TableCommon from './common';

import VXETable from 'vxe-table';
import util from '@/util/util';
export default {
  components: { TableCommon },
  data() {
    return {
      form: {
        versionName: '',
        pubts: '',
        isEnabled: '',
        modifierName: '',
        modifyTime: '',
      },
      tableColumn: [
        {
          field: 'name',
          treeNode: true,
          minWidth: 100,
          title: '检测项目 / 检测参数',
          editRender: {},
          slots: {
            default: 'd_itemName',
            edit: 'e_itemName',
          },
        },
        {
          field: 'itemShortName',
          title: '项目编号拼音简称',
          width: 130,
          editRender: {},
          slots: {
            edit: 'e_itemShortName',
            default: 'd_itemShortName',
          },
        },
        {
          field: 'salesUnit',
          title: '计价单位',
          width: 80,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'e_salesUnit',
            default: 'd_salesUnit',
          },
        },
        {
          field: 'unitPrice',
          title: '单价(元)',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'e_unitPrice',
            default: 'd_unitPrice',
          },
        },
        {
          field: 'domainIds',
          title: '检测领域',
          editRender: {},
          slots: {
            edit: 'e_area',
            default: 'd_area',
          },
        },
        {
          field: 'detectionStdIds',
          title: '检测标准',
          editRender: {},
          slots: {
            edit: 'e_std',
            default: 'd_std',
          },
        },
        {
          field: 'workingHours',
          title: '工时',
          width: 80,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'e_workingHours',
            //   default: 'd_hours',
          },
        },
        {
          field: 'remarks',
          title: '备注',
          editRender: {},
          slots: {
            edit: 'e_remarks',
            //   default: 'd_remark',
          },
        },
        {
          field: 'isEnabled',
          title: '状态',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'e_status',
            default: 'd_status',
          },
        },
        {
          title: '操作',
          align: 'center',
          headerAlign: 'left',
          slots: { default: 'operation' },
        },
      ],
      tableData: [],
      commonTableData: [],
      mergeCells: [],
    };
  },
  async created() {
    this.getQuery();
    this.getList();
  },
  methods: {
    parseTime: util.parseTime,
    back() {
      this.$router.go(-1);
    },
    edit() {
      this.$router.push('/lowcostEdit');
    },
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      if (!query) {
        query = window.location.hash.split('?')[1];
      }
      if (!query) {
        return;
      }
      var vars = query.split('&');
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (pair[0] == variable) {
          return decodeURIComponent(pair[1]);
        }
      }
      return '';
    },
    getQuery() {
      this.form.infoId = this.getQueryVariable('infoId');
      this.form.versionName = this.getQueryVariable('versionName');
      this.form.pubts = this.getQueryVariable('pubts')
        ? this.parseTime(this.getQueryVariable('pubts'), '{y}-{m}-{d}')
        : '';
      this.form.isEnabled = this.getQueryVariable('isEnabled');
    },
    showFn({ data, field }) {
      return data[field];
    },
    async insertEvent(row) {
      const $table = this.$refs.common.$refs.table;
      const record = {
        parentTag: null,
        tag: Date.now() + '',
        isEnabled: true,
        chargeStdParamList: [],
        itemName: '',
      };
      const { row: newRow } = await $table.insertAt(record, row);
      await $table.setActiveCell(newRow);
    },
    getList() {
      this.$api
        .getChargeStdDetail({
          infoId: this.getQueryVariable('infoId'),
        })
        .then((res) => {
          const { chargeStdItemList, modifierName, modifyTime } = res.data;
          this.form.modifierName = modifierName;
          this.form.modifyTime = modifyTime ? this.parseTime(modifyTime, '{y}-{m}-{d}') : '';
          this.commonTableData = chargeStdItemList;
        });
    },
    async save() {
      this.$refs.common.fullValidEvent();
    },
    async submit() {
      const $table = this.$refs.common.$refs.table;
      const { afterTreeFullData } = $table.$refs.xTable;
      const data = {
        infoId: this.form.infoId,
        itemList: afterTreeFullData,
      };
      this.$api.saveChargeStd(data).then((res) => {
        VXETable.modal.message({
          content: '保存成功',
          status: 'success',
        });
        this.back();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
